<template>
  <div>
    <h1>后端搜索功能</h1>

    <input v-model="query" type="text" placeholder="请输入关键字" />

    <hr />

    <p>搜索结果：{{ result }}</p>

    <hr />

    <input v-model="query1" type="text" placeholder="请输入关键字" />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import http from "./utils/request";

const query = ref("");
const query1 = ref("");
const result = ref("");

watch(query, (value) => {
  console.log("hello world world world");
  http.server
    .get("http://localhost:3000/search", {
      params: {
        name: value,
      },
      loading: true,
    })
    .then(({ data }) => {
      // console.log("data", data);
      result.value = data;
    });
});

watch(query1, (value) => {
  http.server
    .get("http://localhost:3000/search", {
      params: {
        name: value,
      },

      cancel: false, // 取消重复请求的功能, 不要
    })
    .then(({ data }) => {
      // console.log("data", data);
      result.value = data;
    });
});
</script>
